<template>
  <div>
    <el-dialog
      title="配置"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="95px"
          :disabled="flag"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="参数名称" prop="paraName">
                <el-input
                  v-model="form.paraName"
                  placeholder="请输入参数名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备类型" prop="typeID">
                <el-cascader
                  :options="devices"
                  v-model="form.typeID"
                  :props="cascaderProps"
                  placeholder="请选择设备类型"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!form.id">
            <el-col :span="12">
              <el-form-item label="序号" prop="paraNo1">
                <el-input v-model="form.paraNo1" placeholder="请输入序号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参数分类" prop="paraType">
                <el-radio v-model="form.paraType" label="1">遥信量</el-radio>
                <el-radio v-model="form.paraType" label="2">遥测量</el-radio>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-show="form.paraType == 1">
            <el-col :span="12">
              <el-form-item label="报警水平" prop="paraName">
                <el-input
                  v-model="form.warnGrade"
                  placeholder="请输入报警水平"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-show="form.paraType == 2">
            <el-col :span="12">
              <el-form-item label="单位" prop="sign">
                <el-input v-model="form.sign" placeholder="请输入设备名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="提醒下限" prop="paraIniValue">
                <el-input
                  v-model="form.paraIniValue"
                  placeholder="请输入设备名称"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-show="form.paraType == 2">
            <el-col :span="12">
              <el-form-item label="下限" prop="paraMinValue">
                <el-input
                  v-model="form.paraMinValue"
                  placeholder="请输入设备名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上限" prop="paraMaxValue">
                <el-input
                  v-model="form.paraMaxValue"
                  placeholder="请输入设备名称"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="安装图片" prop="img">
              <el-upload
                :limit="1"
                class="upload-demo"
                :action="upload.url"
                :headers="upload.headers"
                :before-upload="handlebefore"
                :on-change="uploadChange"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="note">
                <el-input
                  v-model="form.note"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="12">
              <el-form-item label="可用性" prop="status">
                <el-radio v-model="form.status" :label="1">可用</el-radio>
                <el-radio v-model="form.status" :label="0">不可用</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="formpost" v-if="!flag"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { listGroup, insterDef, updateDef } from "@/api/system/imei";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        typeID: "",
      },
      fileList : [],
      devices: [],
      cascaderProps: {
        value: "typeID",
        label: "groupName",
      },
      upload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/system/manage/upload",
      },
      rules: {
        paraName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
        typeID: [
          { required: true, message: "设备类型不能为空", trigger: "blur" },
        ],
        paraNo1: [{ required: true, message: "序号不能为空", trigger: "blur" }],
        paraType: [
          { required: true, message: "参数分类不能为空", trigger: "blur" },
        ],
      },
      flag: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    init(data, flag) {
      this.flag = false
      this.fileList = []
      this.form = {}
      if (data.id) {
        this.form = data;

        this.flag = flag;
        this.fileList = [{ url:this.form.img}]
        console.log('sss',this.devices);
      }
      this.dialogVisible = true;
      listGroup().then((res) => {
        this.devices = res.rows;
        
      });
    },
    formpost() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (typeof this.form.typeID == "object") {
            this.form.typeID = this.form.typeID[0];
          }
          if (this.form.id) {
            updateDef(this.form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "更新成功",
                  type: "success",
                });
                this.dialogVisible = false
              }
            });
          } else {
            insterDef(this.form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
                this.dialogVisible = false
              }
            });
          }
        }
      });
    },

    handlebefore(file) {
      console.log(file);
    },

    uploadChange(file, fileList) {
      console.log(123, fileList);
      this.form.img = fileList[0].response;
    },
  },
};
</script>